<template>
    <div>
        <div class="r-header">
            <div class="header-item">
                <el-radio-group v-model="tabData" size="small">
                    <el-radio-button label="river">最新</el-radio-button>
                    <el-radio-button label="region">时间段</el-radio-button>
                </el-radio-group>
            </div>
            <!-- <div v-show="tabData === 'river'" class="header-item">
                <span>时间：</span>
               
                <el-date-picker size="small" v-model="daysdate" type="month" placeholder="选择日期">
                </el-date-picker>
            </div> -->
            <div v-show="tabData === 'region'" class="header-item">
                <span>时间：</span>
                <el-date-picker style="width:220px" size="small" v-model="dataRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="header-item">
                <span>监测项目：</span>
                <el-select size="small" v-model="bussinessData" multiple collapse-tags style="margin-left: 20px;"
                    placeholder="请选择" @change="selectChange">
                    <el-option v-for="item in bussinessItemList" :key="item.itemCode" :label="item.itemName"
                        :value="item.itemCode">
                    </el-option>
                </el-select>
            </div>
            <div class="header-item">
                <span>是否超标：</span>
                <el-switch v-model="isOver" active-color="#13ce66" inactive-color="#cccccc">
                </el-switch>
            </div>
        </div>
        <div class="header-btns">
            <el-button class="query-btn" type="primary" icon="el-icon-search" size="mini"
                @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <!-- <el-button type="warning" icon="el-icon-download" size="mini" plain
                v-hasPermi="['system:user:export']">导出</el-button> -->
        </div>
        <div class="content">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column label="序号">
                    <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="断面名称" width="100">
                    <template slot-scope="scope">{{ scope.row.segmentname }}</template>
                </el-table-column>
                <el-table-column prop="riverName" label="所属河流/湖库" width="120">
                </el-table-column>
                <el-table-column prop="sampletime" label="监测时间" show-overflow-tooltip width="160">
                </el-table-column>
                <!-- <el-table-column prop="segmentindex" label="水质指数" show-overflow-tooltip>
                </el-table-column> -->
                <el-table-column prop="qualitylevelname" label="水质级别" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="是否超标" show-overflow-tooltip>
                    <template slot-scope="scope"><span
                            :style="{ color: scope.row.IsOvers == 0 ? '#13ce66' : '#ff4949' }">
                            {{ scope.row.isoverstandard == 0 ? '达标' : '超标' }}
                        </span></template>
                </el-table-column>
                <el-table-column prop="waterquality" label="水质评价" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="overstandarddescribe" label="超标描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="dataSource" label="数据来源" show-overflow-tooltip></el-table-column>
                <el-table-column v-for="(item, index) in businessList" :key="index" :label="item.itemName"
                    show-overflow-tooltip>
                    <!-- <template slot-scope="scope">{{ scope.row[item.itemCode + '_Val'] }}{{
                        scope.row[item.itemCode + '_unit'] }}</template> -->
                        <template slot-scope="scope">{{ scope.row[item.eNName] }}</template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { bussinessItemData, manualMonitorData, manualMonitordataLastTime, autoQualityCalendarHistorylist, autoQualityCalendarNewlist } from '@/api/dataResources/waterJcData/sgMonitor'
export default {
    name: 'rightTable',
    props: {
        checkedTreeNodes: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            dataRange: "",
            originDate: '',
            daysdate: '',
            beginTime: '',
            endTime: '',
            isOver: false,
            bussinessItemList: [],
            bussinessData: '',
            tableData: [],
            businessList: [],
            tabData: 'river',
        }

    },
    watch: {
        tabData: {
            handler(val) {
                if (val == "region") {
                    // 设置默认日期范围为最近三天
                    const endDate = new Date();
                    const startDate = new Date();
                    startDate.setDate(startDate.getDate() - 2); // 从今天往前推两天
                    this.dataRange = [startDate, endDate];
                }
                this.handleQuery();
            },
            deep: true
        }
    },
    created() {
        
        
        this.query();
    },
    methods: {
        async manualMonitordataLastTime() {
            try {
                const res = await manualMonitordataLastTime()
                if (res.code == 200) {
                    this.originDate = res.data.dataTime || new Date();
                    this.daysdate = this.originDate;
                }
            } catch (error) {
                console.error('Error fetching last time data:', error)
            }
        },
        selectedItems() {
            return this.bussinessData.map((itemCode) => {
                const item = this.bussinessItemList.find(
                    (option) => option.itemCode === itemCode);
                return item
            });
        },
        selectChange() {
            this.businessList = this.selectedItems();
            this.handleQuery();
        },
        getParams() {
            let params = {
                startTime: this.daysdate,
                endTime: this.daysdate,
                isoverstandard: this.isOver ? 0 : 1,
                // "bussinessCategoryCode": "CBN",
            }
            if (this.tabData === 'region') {
                params.startTime = this.parseTime(this.dataRange[0], '{yyyy}-{mm}-{dd}')
                params.endTime = this.parseTime(this.dataRange[1], '{yyyy}-{mm}-{dd}')
            }
            params.segmentid = this.checkedTreeNodes
                .filter(item => item.pId != '0')
                .map(item => item.id)
                .join(',');
            // params.itemCode = this.bussinessData.join(',')
            return params;
        },
        resetQuery() {
            this.bussinessData = ""
            this.daysdate = this.originDate
            this.handleQuery()
        },
        // handleQuery() {
        //     let params = this.getParams();
        //     console.log('params', params)
        //     manualMonitorData(params).then(res => {
        //         if (res.code == 200) {
        //             this.tableData = res.data
        //         }
        //     })
        // },
         async handleQuery() {
            let params = this.getParams();
            if (this.tabData === 'river') {
                autoQualityCalendarNewlist({ segmentid: params.segmentid, isoverstandard: params.isoverstandard}).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.rows
                    }
                })
            } else {
                autoQualityCalendarHistorylist(params).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.rows
                    }
                })
            }
            
        },
        changeSwitch(val) {
            this.isOver = val;
        },
        changeDate(val) {
            this.beginTime = this.parseTime(val[0], '{yyyy}-{mm}-{dd}')
            this.endTime = this.parseTime(val[1], '{yyyy}-{mm}-{dd}')
        },
        async query() {
            await this.manualMonitordataLastTime()
            await this.getBussinessItemData()
            await this.handleQuery()
        },
        async getBussinessItemData() {
            try {
                const res = await bussinessItemData({ bussinessCategoryCode: 'DrinkAuto' })
                if (res.code == 200) {
                    this.bussinessItemList = res.data
                    // 默认选中所有监测项目
                    this.bussinessData = res.data.map(item => item.itemCode)
                    // 设置businessList以便表格能正确显示所有选中的项目
                    this.businessList = res.data
                }
            } catch (error) {
                console.error('Error fetching business items:', error)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.r-header {
    display: flex;
    justify-content: left;
    align-items: center;
}

.header-item {
    margin-right: 10px;
}

.header-btns {
    display: flex;
    margin-top: 10px;
}

.content {
    margin-top: 10px;

}
</style>